const { defineConfig } = require('@vue/cli-service')
const TerserPlugin = require("terser-webpack-plugin");
const FileManagerPlugin = require('filemanager-webpack-plugin')
// const CompressionPlugin = require('compression-webpack-plugin')
const moment = require("moment");
const NAME = moment().format('yyyyMMDD')
const path = require('path');
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
const resolve = (dir) => path.join(__dirname, dir);
module.exports = defineConfig({
    // devServer 支持 webpack-dev-server 所有选项
    devServer: {
        open: true, // 是否在开启服务器后自动打开浏览器访问该服务器
        // host: '',
        port: 8080,
        // hot: true,
        // disableHostCheck: true, //新版的webpack-dev-server出于安全考虑，默认检查hostname，
        // https: false, //如果是https代理的话，这个要打开的
        proxy: {
            '/api': {
                target: 'http://localhost:8080', // 后端服务域名
                ws: true, // 是否支持 websocket
                changeOrigin: true, // 是否支持跨域
                pathRewrite: {
                    '^/': '/' // 路径片段重写
                }
            }
        }
    },
    // 编译环境类型
    // 项目部署的基本路径，默认 '/'
    publicPath: IS_PROD ? './' : '/', // 生产环境使用相对路径
    // 项目打包的根目录，默认 'dist'
    outputDir: 'dist',
    // 项目打包的静态资源存放目录，默认 '
    assetsDir: 'static',
    // 项目打包的index.html输出路径，默认 'index.html'
    indexPath: 'index.html',
    // 多页应用配置参数，默认 undefined
    pages: undefined,
    // 开发环境 eslint 异常信息提示位置，默认 'default' 在浏览器窗口提示，为 true 在控制台提示
    lintOnSave: false,
    // 项目打包是否生成js的 source map 调试包，默认 true，生产部署设置为false
    productionSourceMap: false,
    // css 配置
    css: {
        // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中、生产环境下默认 true，开发环境下默认 false
        extract: true,
        // 是否开启 css 的 source map 调试，默认 false
        sourceMap: false,
        loaderOptions: {
            scss: {
                prependData:
                    `@import "@/assets/style/variables.scss";`
            },
            less: {
                // globalVars: {
                //     primary: '#fff'
                // }
            }
        }
    },
    //生产环境取消 console.log (通过 terser-webpack-plugin 来实现)
    configureWebpack: (config) => {
        if (IS_PROD) {
            const plugins = [
                new TerserPlugin({
                    parallel: 6,
                    extractComments: false, // 不将注释提取到单独的文件中
                    terserOptions: {
                        ecma: 5, // specify one of: 5, 2015, 2016, etc.
                        mangle: true, // Note `mangle.properties` is `false` by default.
                        compress: {
                            drop_console: true, // 生产环境下移除控制台所有的内容
                            drop_debugger: false // 移除断点
                        }
                    }
                }),
                //打包时自动生成dist.zip + 时间戳
                new FileManagerPlugin({
                    onEnd: {
                        delete: ['./dist/*.zip'], // 仅删除旧的 zip 文件
                        archive: [
                            { source: './dist', destination: `./dist/anjg-${NAME}.zip` },
                        ]
                    }
                })
            ];
            config.plugins = [...config.plugins, ...plugins];
        }
        // 移除 Mock 相关代码
        // if (IS_PROD) {
        //     config.plugins = config.plugins.filter((plugin) => plugin.constructor.name !== 'MockPlugin');
        // }
        config.resolve.alias = {
            '@': resolve('src'),
        };
        // 应用外部CDN资源
        config.externals = {
        };
        //公共代码抽离
        if (IS_PROD) {
            config.optimization = {
                runtimeChunk: 'single',
                splitChunks: {
                    chunks: 'all',
                    minSize: 20000, // 允许新拆出 chunk 的最小体积
                    // minChunks: 2,
                    maxAsyncRequests: 6, // 每个异步加载模块最多能被拆分的数量
                    maxInitialRequests: 6, // 每个入口和它的同步依赖最多能被拆分的数量
                    enforceSizeThreshold: 25000, // 强制执行拆分的体积阈值并忽略其他限制
                    cacheGroups: {
                        common: {
                            name: "chunk-common",  //打包名称
                            chunks: 'all', // 'all',  'async'仅打包异步引用的依赖， 'initial', 仅打包同步引用的依赖
                            test: /[\\/]src[\\/]js[\\/]/,  //正则
                            minChunks: 2,
                            maxInitialRequests: 5,
                            minSize: 0,
                            enforce: true,
                            priority: 1
                        },
                        vant: {
                            name: "chunk-vant",
                            test: /[\\/]node_modules[\\/]vant[\\/]/,
                            chunks: "all",
                            priority: 3,
                            reuseExistingChunk: true,
                            enforce: true
                        },
                        echarts: {
                            name: "chunk-echarts",
                            test: /[\\/]node_modules[\\/](vue-)?echarts[\\/]/,
                            chunks: "all",
                            priority: 4,
                            reuseExistingChunk: true,
                            enforce: true
                        }
                    }
                }

            };
        }
    },
    chainWebpack: (config) => {
        // 移除预加载和预获取以优化性能
        config.plugins.delete('preload');
        config.plugins.delete('prefetch');
        // 配置 webpack 识别 markdown 为普通的文件
        config.module.rule('markdown').test(/\.md$/).use().loader('file-loader').end();
        // 公共图标加载

        // 清除默认 SVG 规则
        config.module.rules.delete('svg')

        // 雪碧图规则
        config.module
            .rule('svg-sprite')
            .test(/\.svg$/)
            .include.add(resolve('src/assets/icons')) // 指定图标目录
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]' // 命名规则
            })
        // 其他 SVG 文件处理
        config.module
            .rule('svg-file')
            .test(/\.svg$/)
            .exclude.add(resolve('src/assets/icons'))
            .end()
            .type('asset/resource')
        config.module
            .rule('images')
            .test(/\.(png|jpe?g|gif|webp)$/)
            .type('asset/resource')
            .set('generator', {  // 使用set方法替代链式调用
                filename: 'static/img/[name].[hash:8][ext]'
            })
    },
})
